<template>
    <div class="home_box displayBox">


        <br>
        <Carousel :img-list="imgList" style="max-width: 1200px"></Carousel> <!--首页轮播图-->
        <br>
        <div class="home_content">
            <div class="home_content_left">
                <HomeExGratia :data-list="exGratiaList"></HomeExGratia> <!--精品游戏轮播图-->
                <!--                <br>-->
                <!--                <HomeBulletin :bulletinList="bulletinList" :title="'网站公告'"-->
                <!--                              :img="'public/img/home/t01b8d976a9f12bd368.jpg'"></HomeBulletin>-->
                <!--                <br>-->
                <HomeOpinion></HomeOpinion> <!--意见收集-->
                <!--                <br>-->
                <!--                <HomeSpecial></HomeSpecial> &lt;!&ndash;专题栏目&ndash;&gt;-->
                <!--                <br>-->
                <HomeResource></HomeResource> <!--首頁下方资源列表-->

            </div>
            <div class="home_content_right">
                <HomeFeaturedHotspots><h3>精选热点</h3></HomeFeaturedHotspots> <!-- 精选热点列表-->

                <HomeERCode></HomeERCode> <!--微信二维码关注-->
                <br>
                <HomeBulletin :bulletinList="bulletinList" :title="'最新公告'"></HomeBulletin> <!--最新公告-->
                <br>
                <HomeContactUs></HomeContactUs> <!--咨询侧边栏-->

            </div>
        </div>


    </div>
</template>
<!--首页-->
<script setup>
import {onMounted, ref} from "vue";
import Carousel from "@/components/publicComponent/Carousel.vue";
import HomeExGratia from "@/components/home/HomeExGratia.vue";
import HomeBulletin from "@/components/home/HomeBulletin.vue";
import HomeResource from "@/components/home/HomeResource.vue";
import HomeERCode from "@/components/home/HomeERCode.vue";
import HomeFeaturedHotspots from "@/components/publicComponent/SideInformation.vue";
import HomeContactUs from "@/components/home/HomeContactUs.vue";
import api from "@/request/index.js";
import HomeOpinion from "@/components/home/HomeOpinion.vue";


//轮播图图片列表
const imgList = ref([
    {path: "", img: "https://www.lyzhnb.top/wf/M7lyrQ.jpg", msg: ""}
])

//精品游戏列表
const exGratiaList = ref([{
    id: 0,
    uid: 1003,//文章所属用户id
    body: "文章内容", //文章内容
    title: "文章标题", //文章标题
    support: 12, //点赞数
    visit: 1275, //浏览数
    cover: "/img/home/t01b8d976a9f12bd368.jpg", //封面
    time: new Date,//文章时间
    kind: "软件",//文章类型
}]);

//最新公告列表
const bulletinList = ref([
    {title: "", id: ""},
]);


//预加载
onMounted(() => {

    //精品游戏列表
    api.getArticlePage(1, 12, "游戏,免费").then((res) => {
        exGratiaList.value = res.data.data.records
    })

    //资源列表
    api.getArticlePage(1, 5, "公告").then((res) => {
        bulletinList.value = res.data.data.records
    })


        //获取网站首页配置轮播图信息
    api.homeCarousel("home_carousel").then((res) => {
        if(res.data.code === 200){
            imgList.value = []
            imgList.value= res.data.data;
        }
    })

});


</script>

<style scoped>

.home_content {
    display: flex;
    justify-content: center;

}

.home_content_left {
    width: 885px;
    margin-right: 15px;
    transition: all .3s;
}

.home_content_right {
    max-width: 300px;

}


</style>